<template>
  <div class="wss-container">
    <el-row :gutter="20" type="flex">
      <el-col :span="8" class="nopd">
        <NewCard title="运营城市">
          <div class="selectCity">
            <h3>
              <p>城市</p>
              <p>专家数</p>
              <!-- <p>状态</p> -->
            </h3>
            <el-collapse v-model="activeNames">
              <!-- 省份 -->
              <el-collapse-item
                v-for="(prov, index) in operatingCity"
                :key="index"
                :name="index"
              >
                <template slot="title">
                  <h4>
                    <!-- <p>{{prov.province}}</p>
                    <p>{{prov.expertNum}}</p> -->
                    <p>{{ prov.province }}</p>
                    <p>{{ sum(prov) }}</p>
                    <!-- <p @click.stop="">
                      <el-switch v-model="prov.status" active-color="#F87A23">
                      </el-switch>
                    </p> -->
                  </h4>
                </template>

                <!-- 城市 -->
                <ul class="city-list">
                  <li
                    v-for="(city, index) in operatingCity[index].children"
                    :key="index"
                     :class="{ tagActive: cityId === city.cityCode }"
                     @click="currentclick(city,index)"
                  >
                    <p>{{ city.city }}</p>
                    <p>{{ city.expertNum }}</p>
                    <!-- <p>
                      <el-switch v-model="city.status" active-color="#F87A23">
                      </el-switch>
                    </p> -->
                  </li>
                  <li class="choiceCity-box" v-if="presentIndex == index">
                    <el-select
                      v-model="checkedCity"
                      placeholder="选择地市"
                      @change="
                        (value) => {
                          changecity(value, prov);
                        }
                      "
                    >
                      <el-option
                        v-for="(city, index) in presentCity"
                        :key="index"
                        :label="city.label"
                        :value="city.value"
                      >
                      </el-option>
                    </el-select>
                  </li>
                  <li class="add-svg">
                    <svg-icon
                      icon-class="add-icon"
                      @click="clickAddSvg(index, prov)"
                    />
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- 添加省份 -->
          <div class="bottomBtn">
            <el-button @click="clickAddProvince" v-if="addProvinceShow"
              >+添加省份</el-button
            >
            <div class="addFrom" v-else>
              <el-form :inline="true" ref="form" :model="addExpert">
                <el-form-item>
                  <el-cascader
                    ref="cascader"
                    @change="handleChange"
                    :options="options"
                  >
                    <template #default="{ data }">{{ data.label }}</template>
                  </el-cascader>

                  <!-- <el-select v-model="addProvince" @change="changeProvince"  placeholder="请选择省份" >
                    <el-option
                      v-for="(op,index) in options"
                      :key="index"
                      :label="op.label"
                      :value="op.value">
                    </el-option>
                  </el-select> -->
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submit" class="defaultBtn" round
                    >确认</el-button
                  >
                  <el-button class="elBtn" round @click="addProvinceShow = true"
                    >取消</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </NewCard>
      </el-col>
      <el-col :span="16">
        <ProjectList :projectdata="projectdata" :citytitle="citytitle"></ProjectList>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//引入省市区数据的插件
import { provinceAndCityData, CodeToText } from "element-china-area-data";
import { switchTree } from "../../../utils/wss";
import {
  getserviceCityApi,
  addserviceCityApi,
  getprojectTypeApi
} from "../../../newApi_3-24/BK/aricereview/city";

import NewCard from "@/wss/components/newCard.vue";
import ProjectList from "./projectList.vue";
export default {
  components: { NewCard, ProjectList },
  data() {
    return {
      activeNames: [0], //当前折叠面板默认展开的
      options: provinceAndCityData, //省市区的数据
      cityId:"",//高亮

      presentIndex: -1, // 当前选中的省份的index
      presentCity: [], // 当前选中的省份的城市数据
      checkedCity: "",
      CodeToText: CodeToText,

      addProvinceShow: true, //底部按钮
      addProvince: "", //底部选中的省份
      addExpert: {},
      value: "",
      //项目列表需要的数据
      projectdata:[],
      citytitle:"",//城市名称

      operatingCity: [
        // {
        //   title: "广东省",
        //   expertNum: 20,
        //   state: true,
        //   children: [
        //     {
        //       title: "东莞市",
        //       expertNum: 10,
        //       state: true,
        //     },
        //     {
        //       title: "深圳市",
        //       expertNum: 8,
        //       state: true,
        //     },
        //     {
        //       title: "广州市",
        //       expertNum: 2,
        //       state: true,
        //     },
        //   ],
        // },
        // {
        //   title: "湖南省",
        //   expertNum: 8,
        //   state: true,
        //   children: [
        //     {
        //       title: "长沙市",
        //       expertNum: 8,
        //       state: true,
        //     },
        //   ],
        // },
      ],
    };
  },
  created() {
    this.getserviceCityApiFn();
  },
  methods: {
    test(a) {
      console.log(this.$refs.cascader.getCheckedNodes());
      // console.log(a);
    },
    async getserviceCityApiFn() {
      let { code, rows, total } = await getserviceCityApi(this.pageing);
      if (code != 200) return;
      this.operatingCity = this.handleArea(JSON.parse(JSON.stringify(rows)));
    
      console.log(this.operatingCity, "没有吧！");
      // console.log(this.operatingCity,"this.operatingCity")
    },

    handleArea(arr) {
      const districtList = [];
      arr.forEach((v) => {
        let index = districtList.findIndex(
          (item) => item.province === v.province
        );
        if (index === -1) {
          districtList.push({
            province: v.province,
            cityCode:v.cityCode,
            id: v.id,
            country: v.country,
            expertNum: v.expertNum,
            status: v.status,
            createTime: v.createTime,
            children: [
              {
                city: v.city,
                expertNum: v.expertNum,
                status: v.status,
                 cityCode:v.cityCode,
                // children: [
                //   {
                //     value: v.area,
                //   },
                // ],
              },
            ],
          });
        } else {
          let cityIndex = districtList[index]["children"].findIndex(
            (item) => item.value === v.city
          );
          if (cityIndex === -1) {
            districtList[index]["children"].push({
              city: v.city,
              expertNum: v.expertNum,
               cityCode:v.cityCode,
              // children: [{ value: v.area }],
            });
          } else {
            // districtList[index]["children"][cityIndex]["children"].push({
            //   value: v.area,
            // });
          }
        }
      });
      return districtList;
    },
    //新增城市
    async addserviceCityApiFn(data) {
      let { code, rows, total } = await addserviceCityApi(data);
      if (code != 200) return;
      this.$message({
        showClose: true,
        message: "添加成功",
        type: "success",
      });
      this.getserviceCityApiFn();
    },

    // 点击选择地市
    clickAddSvg(index, prov) {
      console.log(index, "2222");
      console.log(prov, "prov");

      //获取当前添加的哪个省的indx
      this.presentIndex = index;
      //清空之前的城市数据
      this.presentCity = [];
      // 过滤当前选中的省份下面的城市数据
      this.options.filter((item) => {
        if (item.label == prov.province) {
          this.presentCity = item.children;
        }
      });
    },
    //选择添加城市
    changecity(value, prov) {
    
    const index=  prov.children.findIndex(item => item.city === this.CodeToText[value])
      console.log(index, "index");
       if (index == -1) {
         let data = {
        province: prov.province,
        status: 0,
        cityCode: value,
        city: this.CodeToText[value],
      };
      this.addserviceCityApiFn(data);
      this.checkedCity = "";
      this.presentIndex = null;
        } else {

          this.$message({
            showClose: true,
            message: "市区已存在",
            type: "warning",
          });
        }
    },
    // 点击添加省份按钮
    clickAddProvince() {
      //显示输入框
      this.addProvinceShow = false;
    },
    //确认提交
    submit() {
      if (this.addProvince != "") {
        const reslut = this.cityfn(this.operatingCity, this.addProvince);
        console.log(reslut, "111");
        if (reslut == -1) {
          let newcity = {
            province: this.addProvince,
            status: 0,
            cityCode: this.cityCode,
            city: this.addcity,
          };
          this.addserviceCityApiFn(newcity);
          this.addProvinceShow = true;
        } else {
          this.$message({
            showClose: true,
            message: "市区已存在",
            type: "warning",
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: "请选择对应的省和市区",
          type: "error",
        });
      }
    },
    cityfn(array, str) {
      var index = array.findIndex((item) => item.province === str);
      //  var index = array.indexOf(str)  // 当数组里的对象为字符串时用这个方法更简单

      return index; // -1 说明array中不存在id为str的对象
    },
    handleChange(value) {
      this.cityCode = value[value.length - 1];
      this.addProvince = this.CodeToText[value[0]];
      this.addcity = this.CodeToText[value[1]];
    },
    // 高亮
   async currentclick(city,index){
      //  this.projectdata.cityCode=city.cityCode
      this.citytitle=city.city
      this.cityId=city.cityCode
       let { code, rows, total } = await getprojectTypeApi({citycode:city.cityCode});
      if (code != 200) return;
      this.projectdata = JSON.parse(JSON.stringify(rows));
      console.log(this.projectdata,"this.operatingCity")
    }
    },
    
  computed:{
     sum() {
        return (value)=>{
   
        return value.children.reduce((pre,cur)=>  pre+=Number(cur.expertNum),0)
}
    }
  },
};
</script>

<style scoped>
h3,
h4,
ul,
li,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.el-row {
  height: 100%;
  margin: 0;
}
>>> .el-row .el-card {
  position: relative;
}
>>> .el-row .el-card__body {
  height: 100%;
}
>>> .el-row .nopd .el-card__body {
  padding: 0;
}
>>> .el-row .nopd .el-card__body > .top {
  margin: 0 30px;
}
>>> .el-row .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
>>> .el-row .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
.el-scrollbar .el-select-dropdown__item {
  text-indent: 1em;
}
.el-scrollbar .el-select-dropdown__item.selected {
  color: #f87a23;
}

/* 运营城市 */
.selectCity {
  margin-bottom: 80px;
}
.selectCity h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin: 0 30px;
  margin-top: 10px;
}
.selectCity h3 > p:nth-child(1),
.selectCity h4 > p:nth-child(1),
.city-list li > p:nth-child(1) {
  width: 40%;
}
.selectCity h3 > p:nth-child(2),
.selectCity h4 > p:nth-child(2),
.city-list li > p:nth-child(2) {
  width: 20%;
  /* width: 40%; */
}
.selectCity h3 > p:last-child,
.selectCity h4 > p:last-child,
.city-list li > p:last-child {
  margin-left: auto;
}

.el-collapse {
  border: 0;
}
.el-collapse >>> .el-collapse-item__content {
  padding-bottom: 0;
}
.el-collapse >>> .el-collapse-item__wrap {
  border-bottom: 0;
}
>>> .el-collapse-item .el-collapse-item__header {
  position: relative;
  padding: 0 30px;
}
>>> .el-collapse-item .el-collapse-item__arrow {
  position: absolute;
  left: 10px;
  transform: rotate(-90deg);
}
>>> .el-collapse-item .el-collapse-item__arrow.is-active {
  transform: rotate(0deg);
}
>>> .el-collapse-item .el-collapse-item__arrow::before {
  content: "\E790";
}
.selectCity h4 {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
}

.city-list {
}
.city-list li {
  display: flex;
  border-bottom: 1px solid #e6ebf5;
  line-height: 48px;
  padding: 0 30px;
  transition: all 0.2s;
}
.city-list li:first-child {
  border-top: 1px solid #e6ebf5;
}
.city-list li:hover,
.city-list li.isActive {
  background-color: #ebecf0;
}
.city-list li.add-svg {
  padding: 15px 30px;
  background-color: #fff;
}
.city-list li.add-svg svg {
  font-size: 16px;
  color: #909aaa;
  cursor: pointer;
}

.choiceCity-box .el-select {
  width: 100%;
}
::v-deep .el-tree .el-tree-node {
  border-bottom: 1px solid #f5f5f5;
}
/* 高亮 */
.tagActive {
  background-color: #ebecf0;
  color: #2e3f5e;
}

/* 添加省份 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.bottomBtn > .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}
.bottomBtn .el-form-item .el-button {
  padding: 8px 20px;
}
.defaultBtn {
  background-color: #f87a23;
  border-color: #f87a23;
}

.addFrom {
  padding: 5px;
  background-color: #f8f8f8;
}
.addFrom .el-form-item {
  margin-bottom: 0;
}
.addFrom .el-form {
  text-align: center;
}
</style>